<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="health relative z-9999 box-border min-h-screen pt-50rpx">
    <image
      :src="`${cdnUrl1}/imgs/xy/health/bg.png${imgVersion}`"
      mode="scaleToFill"
      class="pointer-events-none absolute bottom-0 left-0 right-0 top-0 h-100% w-100% -z-9"
    />
    <div class="mb-34rpx box-border flex items-center pl-32rpx text-32rpx text-hex-000000">
      <div>
        <image
          :src="userStores.user.avatar_url"
          mode="scaleToFill"
          class="mr-34rpx h-69rpx w-68rpx rounded-50%"
        />
      </div>
      <div>Hi，{{ userStores.user.avatar_url? userStores.user.nickname:'您好' }}</div>
    </div>
    <div class="mb-32rpx box-border pl-32rpx">
      <div
        class="font-alimamaShuHeiTi mb-16rpx text-40rpx font-600 text-hex-333333"
      >
        欢迎来到心悦健康频道
      </div>
      <div class="text-24rpx text-hex-7C8699">根据选择进入下方入口,了解健康情况</div>
    </div>
    <swiper
      circular
      indicator-dots
      autoplay
      indicator-active-color="#F58C0F"
      :interval="interval"
      :current="swiperIndex"
      class="h-700rpx w-100%"
      @change="swiperChange"
    >
      <swiper-item @click="gohealthprogram">
        <div class="flex flex-col items-center">
          <image
            :src="`${cdnUrl1}/imgs/xy/health/x1.png${imgVersion}`"
            mode="heightFix"
            class="mb-32rpx h-450rpx"
          />
          <div class="relative mb-12rpx text-60rpx font-bold text-hex-212424">
            健康问卷调查
            <div class="dotboxshadow absolute h-50rpx w-50rpx rounded-50% bg-hex-FFD336 -right-20rpx -top-5rpx -z-9" />
          </div>
          <div class="text-28rpx text-hex-8C9496">获取专属定制营养方案</div>
        </div>
      </swiper-item>
      <swiper-item @click="navTo('/pages-health/noData')">
        <div class="flex flex-col items-center">
          <image
            :src="`${cdnUrl1}/imgs/xy/health/x2.png${imgVersion}`"
            mode="heightFix"
            class="mb-32rpx h-450rpx"
          />
          <div class="relative mb-12rpx text-60rpx font-bold text-hex-212424">
            智能设备检测
            <div class="dotboxshadow absolute h-50rpx w-50rpx rounded-50% bg-hex-FFD336 -right-20rpx -top-5rpx -z-9" />
          </div>
          <div class="text-28rpx text-hex-8C9496">蓝牙绑定智能设备获取健康信息</div>
        </div>
      </swiper-item>
    </swiper>
    <div class="mt-50rpx flex items-center justify-center">
      <div
        v-if="swiperIndex===0"
        class="gohealthProgram btn-theme-bg box-border rounded-40rpx px-52rpx py-14rpx text-28rpx"
        @click="gohealthprogram">去测评</div>
      <div
        v-if="swiperIndex===1"
        class="gohealthProgram btn-theme-bg box-border rounded-40rpx px-52rpx py-14rpx text-28rpx"
        @click="goSettingProgram">去检测</div>
    </div>
    <div class="h-167rpx">
      <tab-bar :is-show-text="true" />
    </div>
  </div>
  <!-- <tab-bar /> -->
</template>

<script lang="ts" setup>

import { useLoginStore } from '@/stores/login'

const loginStore = useLoginStore()
let swiperIndex: any = $ref(0)
let interval: any = $ref(6000)
let searchBarTop: any = $ref('24')
const userStores = useUserStore()
onLoad(() => {
  uni.hideTabBar()
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})

onShareAppMessage((res) => {
  return {
    title: '欢迎来到心悦健康频道',
    path: '/pages/health',
  }
})
onShareTimeline(() => {
  return {
    title: '分享朋友圈',
  }
})
const swiperChange = (e) => {
  swiperIndex = e.detail.current
}
const gohealthprogram = () => {
  if (!loginStore.roleId) {
    loginStore.setIsBack(true)
    loginStore.isGoLogin()
    return
  }
  uni.navigateTo({
    url: '/pages-health/healthProgramme',
  })
}

const goSettingProgram = () => {
  if (!loginStore.roleId) {
    loginStore.setIsBack(true)
    loginStore.isGoLogin()
    return
  }
  navTo('/pages-health/noData')
}
onMounted(() => {
  userStores.useGetInfoData()
})
</script>

<style lang="scss" scoped>

.health{
  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }

  .bgblur{
    backdrop-filter: blur(20rpx);
  }

  .boxshadow{
    box-shadow: inset 0rpx 3rpx 4rpx 0rpx #FCFFF8;
  }

  .dotboxshadow{
    box-shadow: 0rpx 14rpx 36rpx 0rpx rgb(43 238 214 / 13%);
  }

  .gohealthProgram{
    box-shadow: 0rpx 8rpx 28rpx 0rpx rgb(24 167 134 / 20%);
  }
}
</style>

